<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                template="./../../template/templateSGPF.xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core">

    <ui:define name="corpo da página">
        <script>
            function verify(value) {
                if (value.flag === "salvar") {
                    PF('confirmacao').show();
                }
                if (value.flag === "ok") {
                    PF('save').show();
                }
            }
            function disableConfirm() {
                $('[id=\'conteudo:confirm\']').attr('disabled', 'true');
            }
            function disableDecline() {
                $('[id=\'conteudo:decline\']').attr('disabled', 'true');
            }

            function removerEspacos(inputtext) {
                inputtext.value = inputtext.value.replace(/^\s+|\s+$/g, "");
            }
            
            function alteraMaiusculo(inputtext) {
                inputtext.value = inputtext.value.toUpperCase();
            }

        </script>
        <center><h1>#{subsetorBean.titulo} </h1></center>
        <h:form id="formSubsetor" prependId="false">

            <div class="row-fluid">
                <div class="span6">
                    <div class="well-custom3">
                        <div class="row-fluid" >
                            <strong for="Nome" class="font-color-green">
                                Nome<strong style="color:red">*</strong>:</strong> 
                        </div>
                        <div class="row-fluid">
                            <div class="span6">
                                <p:inputText id="txt_nome" style="width: 97%; height: 30px;"
                                             value="#{subsetorBean.subsetor.nome}" 
                                             class="form-control"
                                             onkeyup="alteraMaiusculo(this)"/>                                
                            </div>
                            <div class="span6">
                                <p:messages for="msgNome" showDetail="true" autoUpdate="true" closable="true"/>                                           
                            </div>
                        </div>

                        <div class="row-fluid" >
                            <strong for="Sigla" class="font-color-green">
                                Sigla <strong style="color:red">*</strong>:</strong> 
                        </div>
                        <div class="row-fluid">
                            <div class="span6">
                                <p:inputText id="txt_sigla" style="width: 97%; height: 30px;"
                                             value="#{subsetorBean.subsetor.sigla}" 
                                             class="form-control"
                                             onkeyup="alteraMaiusculo(this)"/>                                
                            </div>
                            <div class="span6">
                                <p:messages for="msgSigla" showDetail="true" autoUpdate="true" closable="true"/>                                           
                            </div>
                        </div>

                        <div class="row-fluid">                                       
                            <strong for="txtFone" class="font-color-green">
                                Telefone:</strong>                                 
                        </div>
                        <div class="row-fluid">
                            <div class="span6">
                                <p:inputMask id="txt_telefone" style="width: 97%; height: 30px; "
                                             mask="(99) 9999-9999"
                                             value="#{subsetorBean.subsetor.ramal}"/>                                
                            </div>
                            <div class="span6">
                                <p:messages for="msgIniciativa" showDetail="true" autoUpdate="true" closable="true" />                                
                            </div>
                        </div>

                        <div class="row-fluid">
                            <strong for="txtPopulacao" class="font-color-green">
                                Responsável: </strong> 
                        </div>
                        <div class="row-fluid">
                            <div class="span6">
                                <p:selectOneMenu id="sloResponsavel" 
                                                 style="width: 97%; color: black"
                                                 value="#{subsetorBean.subsetor.responsavel}"
                                                 filter="true"
                                                 filterMatchMode="startsWith"
                                                 converter="servidorConverter"
                                                 >
                                    <f:selectItem itemLabel="Selecione o responsável" itemValue="" />
                                    <f:selectItems value="#{subsetorBean.servidores}"
                                                   var="servidor"
                                                   itemValue="#{servidor}"
                                                   itemLabel="#{servidor.nome} - #{servidor.unidade.sigla}"
                                                   class="font-color-black"
                                                   />
                                </p:selectOneMenu>
                            </div>
                            <div class="span6">
                                <p:messages for="msgResponsavel" showDetail="true" autoUpdate="true" closable="true"/>                                           
                            </div>
                        </div>

                        <div class="row-fluid" style="margin-top: 1%">
                            <strong for="txtPopulacao" class="font-color-green">
                                Setor: </strong> 
                        </div>
                        <div class="row-fluid">
                            <div class="span6">
                                <p:selectOneMenu id="sloUnidade" 
                                                 style="width: 97%; color: black"
                                                 value="#{subsetorBean.subsetor.setor}"
                                                 filter="true"
                                                 filterMatchMode="startsWith"
                                                 converter="setorConverter"
                                                 >
                                    <f:selectItem itemLabel="Selecione o setor" itemValue="" />
                                    <f:selectItems value="#{subsetorBean.setores}"
                                                   var="setor"
                                                   itemValue="#{setor}"
                                                   itemLabel="#{setor.sigla} - #{setor.nome}"
                                                   class="font-color-black"
                                                   />
                                </p:selectOneMenu>
                            </div>
                            <div class="span6">
                                <p:messages for="msgSetor" showDetail="true" autoUpdate="true" closable="true"/>                                           
                            </div>
                        </div>

                    </div>                                
                </div>
                <div class="span6">
                    <div class="well-custom3">
                        <h:form id="frmLista">
                            <p:dataTable id="tbSetor" 
                                         var="subsetor" 
                                         value="#{subsetorBean.subsetores}"
                                         scrollable="true"
                                         scrollHeight="200"  
                                         emptyMessage="N&atilde;o h&aacute; dados para exibi&ccedil;&atilde;o"
                                         class="form-control"
                                         >

                                <p:column headerText="Subsetor:"
                                          style="width: 15%;"                                          
                                          >
                                    <h:outputText value="#{subsetor.sigla}"/>
                                </p:column>

                                <p:column headerText="Responsável:" >                                                                                   
                                    <h:outputText value="#{subsetor.responsavel.nome}"/>
                                </p:column>

                                <p:column style="width: 7%">
                                    <p:commandLink 
                                        title="Alterar"
                                        action="#{subsetorBean.alterar()}"
                                        >
                                        <p:graphicImage value="/resources/img/edit.png"/>
                                        <f:actionListener binding="#{subsetorBean.putInSession(subsetor)}" /> 
                                    </p:commandLink>
                                </p:column>
                            </p:dataTable>
                        </h:form>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="pull-left">                        
                        <p:commandButton style="width: 100px;"
                                         value="Salvar"                                    
                                         icon="ui-icon-disk"
                                         oncomplete="verify(args);"
                                         action="#{subsetorBean.verificaCamposDialog()}"                                     
                                         update=":formConfirm"
                                         />
                        <p:commandButton style="width: 100px;" 
                                         icon="ui-icon-circle-close"
                                         value="Cancelar" 
                                         action="#{subsetorBean.cancelar()}"
                                         ajax="false"
                                         update=":formSubsetor"/>
                    </div>
                </div>

            </div>

        </h:form>
        <p:confirmDialog global="true"
                         closable="false" 
                         message="O Cadastro foi salvo com sucesso!"  
                         header="Alerta" severity="alert" 
                         widgetVar="save"> 
            <h:form>
                <p:commandButton  id="buttonOK" 
                                  onclick="save.hide();" 
                                  value="OK" 
                                  ajax="false"
                                  action="#{subsetorBean.irCadSetor()}"
                                  >
                </p:commandButton> 
            </h:form>
        </p:confirmDialog>
        <p:confirmDialog 
            global="true"
            header="Confirmação"
            message="Você confirma o envio destas informações?" 
            id="confirmDialog"                               
            severity="alert" 
            widgetVar="confirmacao" 
            closable="false" 
            width="700"
            >
            <h:form id="formConfirm">
                <div class="row-fluid">                        
                    <div class="well-custom2">   
                        <div class="pull-left">
                            <div class="row-fluid">
                                <strong for="Nome" class="font-color-green">
                                    Nome<strong style="color:red">*</strong>: </strong> 
                                <h:outputText value="#{subsetorBean.subsetor.nome} "/>
                            </div>
                            <div class="row-fluid"> 
                                <strong for="Sigla" class="font-color-green">
                                    Sigla:</strong> 
                                <h:outputText value="#{subsetorBean.subsetor.sigla} "/>                                
                            </div>
                            <div class="row-fluid">                                    
                                <strong for="Telefone" class="font-color-green">
                                    Telefone:<strong style="color:red">*</strong>: </strong> 
                                <h:outputText value="#{subsetorBean.subsetor.ramal}" />                                 
                            </div>
                            <div class="row-fluid"> 
                                <strong for="Responsavel" class="font-color-green">
                                    Responsável: </strong> 
                                <h:outputText value="#{subsetorBean.subsetor.responsavel.nome} "/> 
                            </div>
                            <div class="row-fluid"> 
                                <strong for="Setor" class="font-color-green">
                                    Unidade: </strong> 
                                <h:outputText value="#{subsetorBean.subsetor.setor.sigla} "/> 
                            </div>
                        </div>                                                                                

                    </div>                        
                    <div class="pull-left">   
                        <p:commandButton id="confirm" 
                                         onclick="PF('confirmacao').hide();"  
                                         value="Sim" 
                                         oncomplete="verify(args);"
                                         actionListener="#{subsetorBean.salvar()}"
                                         update=":formSubsetor"
                                         />                          
                        <p:commandButton id="decline" value="Não" 
                                         onclick="PF('confirmacao').hide();" 
                                         >                                         
                        </p:commandButton>
                    </div>
                </div>
            </h:form>
        </p:confirmDialog>

    </ui:define>

</ui:composition>
